<template>
	<view  class="top-list">
		<!-- 小程序头 -->
		<musichead class="top-list-head-left" :toshow="true" title="歌单" color="white"></musichead>
		<!-- 背景图片 -->
		<view v-if="!isLoading" class="fixbg" :style="{ 'background-image': 'url('+playList.coverImgUrl+')'}" ></view>
		<view class="container" >
			<!-- 可滚动区域 -->
			<scroll-view  scroll-y="true"  class="scroll-container" >
				
				<!-- 骨架屏 -->
				<view class="gujia" v-if="isLoading">
					<m-for-skeleton
							 margintop="20px"
							 :avatar="true"
					         :avatarSize="260"
							 :title="true"
					         :row=2
							 :titleStyle="{}"
					         isarc='square'
					         v-for="(item,key) in 1"
					         :key="key">
					</m-for-skeleton>
				</view>
				<view v-else>
				
					<!-- 左侧榜单图片,右侧榜单介绍 -->
					<view class="list-head">
						<view class="list-head-img">
							<image :src="playList.coverImgUrl"></image>
							<text class="iconfont icon-yousanjiao">{{playList.playCount | formatCount}}</text>
						</view>
						<view class="list-head-text">
							<view >{{playList.name}}</view>
							<view >
								<image :src="playList.creator.avatarDetail.identityIconUrl"></image>
								<text>{{playList.creator.nickname}}</text>
							</view>
							<view >{{playList.description}}  &gt;</view>
						</view>
					</view>
				</view>
				
				
				
				<!-- 骨架屏 -->
				<view class="gujia" v-if="isLoading">
					<m-for-skeleton
							 margintop="38px"
							 :avatar="false"
							 :avatarSize="200"
							 :title="true"
							 :row= 8
							 :titleStyle="{}"
							 isarc='square'
							 v-for="(item,key) in 1"
							 :key="key">
					</m-for-skeleton>
				</view>
				<view v-else>
					<!-- 分享给微信好友组件 -->
					<!-- #ifdef MP-WEIXIN -->
					<sharefriend></sharefriend>
					<!-- #endif -->
					
					<!-- 歌曲列表组件 -->
					<songlist :songList="songList"></songlist>
				</view>
				
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	
	import {getDetailTopList} from "../../../common/music-api.js"
	import songlist from "../../../components/songlist/songlist.vue"
	// 导入骨架屏组件
	import mForSkeleton from "@/components/m-for-skeleton/m-for-skeleton";
	export default {
		data() {
			return {
				id: '',
				playList: {},
				songList: [],
				isLoading: true,
			}
		},
		components: {
			songlist,
			mForSkeleton,
		},
		methods: {
			
			
		},
		onLoad(optinos){
			
			this.id = optinos.id
			
			getDetailTopList(this.id).then(res => {
				this.playList = res.data.playlist
				console.log(this.playList)
				this.songList = this.playList.tracks
				console.log(this.playList.trackIds)
				this.$store.commit('idList', this.playList.trackIds)
				this.isLoading = false
			})
		},
		computed: {
			scrollHeight() {
				return this.$store.getters.scrollHeight
			}
		}
	}
</script>

<style scoped>
	.gujia {
		margin-top: 60rpx;
	}
	.top-list {height: 100%;}
	.list-head { padding: 0 7px; display: flex; justify-content: space-around; margin-top: 60rpx;}
	/* #ifdef H5 */
	.list-head {
		margin-bottom: 60rpx;
	}
	/* #endif */
	.list-head-img{ position: relative; width: 260rpx; height: 260rpx; margin-left: 10px;}
	.list-head-img text { position: absolute; top:1px; right: 2px; color: #fff; font-size: 12px;;}
	.list-head-img image {border-radius: 10rpx; width: 260rpx; height: 260rpx;}
	.list-head-text {padding-left: 20px; color: #fff;}
	.list-head-text view:nth-child(1){ font-size: 18px; }
	.list-head-text view:nth-child(2){ font-size: 14px; line-height: 50px; }
	.list-head-text view:nth-child(2) image { width: 20px; height: 20px; border-radius: 10px; margin-right: 5px; vertical-align: middle;}
	.list-head-text view:nth-child(3){ font-size: 12px; height: 37px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: rgba(255,255,255,.5);}

</style>
